<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .clock {
            width: 600px;
            height: 600px;
            background: url(../images/clockface.jpg) no-repeat center center;
            position: relative;
        }

        .clock img {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 0;
        }
    </style>
</head>

<body>
    <div class="clock">
        <img src="../images/hourhand.png" alt="" id="h">
        <img src="../images/minhand.png" alt="" id="m">
        <img src="../images/sechand.png" alt="" id="s">
    </div>
    <script>
        //1.查
        var h = document.querySelector('#h');
        var m = document.querySelector('#m');
        var s = document.querySelector('#s');

        function showTime() {
            //2.日期对象
            var date = new Date();
            var hours = date.getHours();
            var minutes = date.getMinutes();
            var seconds = date.getSeconds();
            console.log(hours, minutes, seconds);//9 9 53

            //3.转角度
            /* 
            1小时   30度  ----》360/12   ===30度
      
            9*30=270度      21*30=630    630-360=270
      
            1分钟   6度      ----》360/60=6 度
            13*6=78度
            1秒    6度   ------360/60=6度
            
            */

            /* 
             时针 偏移量     由分钟数的来决来
       分针（  分钟）          60                   minutes
           -------------------------=---------------------
       时针1小时（角度）       30 度                 ？ x
       
         60x=30minutes    x=minumtes/2
      
             分针 偏移量     由秒数的来决来
      
      秒针（  秒数）          60                   seconds
           -------------------------=---------------------
       分针1分钟（角度）       6 度                 ？ y
      
          60y=6seconds
          y=seconds/10
            
            */
            h.style.transform = "rotate(" + (hours * 30 + minutes / 2) + "deg)";
            m.style.transform = "rotate(" + (minutes * 6 + seconds / 10) + "deg)";
            s.style.transform = "rotate(" + seconds * 6 + "deg)";


        }

        showTime();
        setInterval(showTime, 1000)


    </script>
</body>

</html>